<template>
  <div class="main">
    <div class="list-type">
      <Tree :data="typeData" :render="renderContent" @on-select-change="onTypeChange"></Tree>
    </div>
    <div class="content">
      <div class="toolbar">
        <Input v-model="query.key" placeholder="名称、值" suffix="ios-search" style="width: 200px" />
        <Button icon="ios-search">查询</Button>
        <Button icon="ios-refresh">刷新</Button>
        <Button icon="ios-add" @click="modal=true">新增</Button>
        <Button icon="ios-create-outline" @click="onEdit">编辑</Button>
        <Button icon="ios-trash-outline">删除</Button>
      </div>
      <div class="grid">
        <tree-table
          :expand-type="true"
          :selectable="true"
          :columns="columns"
          :data="data"
          searchable="true"
          :show-index="true"
          @radio-click="onRowSelect"
        >
          <template
            slot="status"
            slot-scope="scope"
            is-fold="false"
          >{{scope.row.status=="1"?'启用':'禁用'}}</template>
        </tree-table>
      </div>
      <div class="pager"></div>
    </div>
    <Modal
      v-model="modal"
      :title="title"
      ok-text="保存"
      @on-ok="handleSave('modal')"
      @on-cancel="cancel"
      ref="modal"
    >
      <Form ref="formInline" :model="model" :rules="ruleInline" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input type="text" v-model="model.name" placeholder="名称"></Input>
        </FormItem>
        <FormItem label="值" prop="value">
          <Input type="text" v-model="model.value" placeholder="值"></Input>
        </FormItem>
        <FormItem label="排序">
          <Input type="number" v-model="model.order" placeholder="排序"></Input>
        </FormItem>
        <FormItem label="是否启用">
          <i-switch v-model="status" @on-change="statusChange" />
        </FormItem>
        <FormItem label="描述">
          <Input v-model="model.remark" type="textarea" placeholder="描述" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import Tables from "_c/tables";
import { getDicTypeTree, saveDic,getDicData } from "@/api/data/";
export default {
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        {
          title: "id",
          key: "id",
          width: "100px"
        },
        {
          title: "parentId",
          key: "parentId",
          width: "100px"
        },
        {
          title: "名称",
          key: "name",
          width: "400px"
        },
        {
          title: "值",
          key: "value",
          minWidth: "50px"
        },
        {
          title: "排序",
          key: "order"
        },
        {
          title: "状态",
          key: "status",
          template: "status",
          type: "template"
        },
        {
          title: "描述",
          key: "remark",
          minWidth: "200px"
        }
      ],
      typeData: [
        { title: "测试类型", expand: true },
        {
          title: "自定义类型",
          expand: true,
          children: [{ title: "类型1", expand: true }]
        }
      ],
      data: [],
      modal: false,
      query: {
        key: ""
      },
      title: "新增",
      status: true,
      model: { status: 1, },
      ruleInline: {
        name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        value: [
          { required: true, message: "请输入字典值", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur"
          }
        ]
      },
      page: { index: 1, size: 10, orderBy: "desc", field: "[order]" },
      query: { keyword: "", type:0 },
    };
  },
  mounted() {
    this.loadTypeData();
    this.loadData();
  },
  methods: {
    loadTypeData() {
      getDicTypeTree("{}").then(res => {
        var data = res.data;
        console.log(data);
        if (data.status != 200) {
          this.$Message.info(data.msg);
        } else {
          this.typeData = data.data;
        }
      });
    },
    loadData() {
      this.page.query=JSON.stringify(this.query);
      getDicData(this.page).then(res=>{
        var data=res.data;
        console.log(data)
        if(data.status!=200){
          this.$Message.info(data.msg);
        }else{
          this.data=data.data;
        }
      });
    },
    onEdit() {},
    onRowSelect(row, rowIndex) {
      this.model = row.row;
      console.log(row);
    },
    handleSave(name) {
      // this.$refs[name].validate(valid => {
      //   if (valid) {
      //     this.$Message.success("Success!");
      //   } else {
      //     this.$Message.error("Fail!");
      //   }
      // });
      saveDic(this.model).then(res => {
        var data = res.data;
        if (data.status != 200) {
          this.$Message.error(data.msg);
        } else {
          this.loadData();
        }
      });
    },
    cancel() {},
    statusChange(status) {
      this.model.status = status ? 1 : 0;
    },
    onEdit() {
      this.title = "修改";
      this.modal = true;
      this.status = this.model.status == 1;
    },
    onTypeChange(node,item) {
      this.model.typeId=item.id;
      this.query.type=item.id;
      this.loadData();
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            cursor: "pointer"
          },
          on: {
            click: () => {this.onTypeChange(node,data)}
          }
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-document"
              },
              style: {
                marginRight: "0px"
              }
            }),
            h("span", data.name)
          ]),
          h("span", {
            style: {
              display: "inline-block",
              float: "right",
              marginRight: "12px",
              cursor: "pointer"
            }
          })
        ]
      );
    }
  }
};
</script>
<style lang="less">
.main {
  height: 100%;
  .list-type {
    width: 20%;
    float: left;
    padding: 10px 10px;
    border: 1px solid #808080;
    overflow: auto;
    height: 100%;
  }
  .content {
    width: 79.5%;
    float: right;
    height: 100%;
    .toolbar {
      margin-bottom: 5px;
    }
  }
}
</style>
